<template>
  <div  class="repost-content">
      <span class="nickname">{{nickname}}</span>
    <div class="text-content" v-html="formatText(retweeted_status.text)">
    </div>
    <pics :mblog="retweeted_status" v-if="retweeted_status.pics && retweeted_status.pics.length>0"/>
      <videopart v-else-if="retweeted_status.page_info&&retweeted_status.page_info=='video'" :vid="retweeted_status.id" :videoData="retweeted_status.page_info"/>
  </div>
</template>

<script>
import pics from '../pics'
import videopart from '../videopart'

export default {
  name: 'repost',
  components:{
    pics,
    videopart
  },
  props: {             //使用props时，把它当作初始值，用的时候需要转换一下，在这种情况下，最好使用这个props定义计算机属性
    mblog: {
      type: Object,
      default: ()=>{
        return {}      //接收对象参数给默认值
      }
    }
  },
  computed:{
      nickname(){
          let nickname=this.retweeted_status.user?'@'+this.retweeted_status.user.screen_name:''
          return nickname+':'
      }
  },
  data(){
    let retweeted_status= this.mblog.retweeted_status||{}    //将传过来的data中的data.mblog留给本地使用
    return {
        retweeted_status:retweeted_status
    }
  },
  methods:{
    formatText(value){
      let reg=/href=("|')(.+?)("|')/gi;
      return value.replace(reg,'').replace(/<br \/><br \/>/g,'<br/>')//g全文搜索 i忽略大小写
    }
  }
}
</script>
<style scoped>
.repost-content{
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #f7f7f7;
}
.text-content{
  font-size: 17px;
  padding-left: 15px;
  line-height: 25px;
  padding-right: 15px;
  margin-top: 6px;
  margin-bottom: 12px;
}
.text-content /deep/ a,.text-content /deep/ .surl-text{
  color: #3c6e9e;
}
.nickname{
    font-size: 17px;
    margin-top: 7px;
    margin-left: 12px;
    color: #3c6e9e;
    float: left;
}
</style>